<template>
  <div class="dashboard">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="product-categories">
      <el-tab-pane label="全部商品" name="all"></el-tab-pane>
      <el-tab-pane label="推荐" name="recommend"></el-tab-pane>
      <el-tab-pane label="美食" name="food"></el-tab-pane>
      <el-tab-pane label="科技" name="technology"></el-tab-pane>
      <el-tab-pane label="穿搭" name="fashion"></el-tab-pane>
      <el-tab-pane label="运动" name="sport"></el-tab-pane>
      <el-tab-pane label="护肤" name="skincare"></el-tab-pane>
    </el-tabs>

    <div class="product-grid">
      <ProductCard 
        v-for="product in products" 
        :key="product.id" 
        :product="product" 
        class="product-card-wrapper"
      />
    </div>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[12, 24, 36, 48]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="fetchProducts"
      @current-change="fetchProducts"
      class="pagination"
    />

    <el-icon class="back-to-top" @click="scrollToTop" v-show="showBackToTop">
      <Top />
    </el-icon>
  </div>
</template>

<script lang="ts" setup>
  import axios from 'axios'
  import { ref, onMounted } from 'vue'
  import ProductCard from '@/components/ProductCard.vue'
  import { Top } from '@element-plus/icons-vue'

  interface Product {
    id: number
    image: string
    name: string
    price: number
    sales: number
    comments: number
    isAd: boolean
  }

  const products = ref<Product[]>([])
  const activeTab = ref<string>('all')
  const currentPage = ref<number>(1)
  const pageSize = ref<number>(12)
  const total = ref<number>(0)
  const showBackToTop = ref<boolean>(false)

  const fetchProducts = () => {
    // 模拟API调用延迟
    setTimeout(() => {
      axios.get('/xiaotao/products').then((res) => {
        products.value = res.data
        total.value = res.data.length
        
        // 模拟分页数据
        const start = (currentPage.value - 1) * pageSize.value
        const end = start + pageSize.value
        products.value = res.data.slice(start, end)
        
        // 添加图片加载完成监听
        window.dispatchEvent(new Event('resize'))
      })
    }, 500)
  }

  const handleTabChange = (tab: string) => {
    currentPage.value = 1
    fetchProducts()
  }

  const scrollToTop = () => {
    const mainEl = document.querySelector('.dashboard')
    if (mainEl) {
      mainEl.scrollTo({
        top: 0,
        behavior: 'smooth',
      })
    }
  }

  // 监听滚动显示返回顶部按钮
  const handleScroll = () => {
    const mainEl = document.querySelector('.dashboard')
    if (mainEl) {
      showBackToTop.value = mainEl.scrollTop > 300
    }
  }

  onMounted(() => {
    fetchProducts()
    const dashboardEl = document.querySelector('.dashboard')
    if (dashboardEl) {
      dashboardEl.addEventListener('scroll', handleScroll)
    }
  })
</script>

<style scoped>
.dashboard {
  height: calc(100vh);
  overflow-y: auto;
  padding: 20px;
  background-color: #f5f5f5;
}

.product-categories {
  margin-bottom: 30px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  justify-items: center;
}

.product-card-wrapper {
  transition: transform 0.3s ease;
}

.product-card-wrapper:hover {
  transform: translateY(-5px);
}

.pagination {
  margin-top: 40px;
  text-align: center;
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.back-to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  font-size: 48px;
  color: white;
  cursor: pointer;
  z-index: 100;
  background-color: #4a90e2;
  border-radius: 50%;
  padding: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.back-to-top:hover {
  background-color: #3c7bbf;
  transform: scale(1.1);
}

/* 滚动条样式 */
.dashboard::-webkit-scrollbar {
  width: 8px;
  border-radius: 4px;
  background: #f1f1f1;
}

.dashboard::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
</style>
